<template>
  <div class="">
    <div class="w-full">
      <Button class="m-r-5px" type="primary" @click="openCsvDatasourcesForm('add')">新建CSV数据源</Button>
      <Tooltip placement="top" content="刷新数据">
        <Button class="m-r-5px" type="primary" @click="loadCsvDatasources">
          <Icon type="md-refresh"/>
        </Button>
      </Tooltip>

      <div class="float-right">
        <Input v-model="searchFormData.name" class="m-r-5px" style="width: 250px;" placeholder="名称" @on-enter="loadCsvDatasources"/>
        <Button class="m-r-5px" @click="loadCsvDatasources">
          <Icon type="md-search"/>
          搜索
        </Button>
        <Button @click="searchFormData.name = ''; loadCsvDatasources()">清空</Button>
      </div>
    </div>
    <div class="m-b-10px"></div>
    <Table :columns="columns" :data="tableData" :loading="loading"></Table>
    <Page size="small" class="m-t-5px float-right" :total="pageTotal" :current.sync="pageIndex" :page-size="pageSize"
          show-elevator show-total @on-change="loadCsvDatasources">
    </Page>

    <CsvDatasourceForm ref="csvDatasourceForm" @refreshDataList="loadCsvDatasources"></CsvDatasourceForm>
  </div>
</template>

<script>

  import CsvDatasourceForm from './CsvDatasourceForm'

  import ManageMixin from '../../../../mixin/ManageMixin'

  export default {
    name: 'CsvDatasourceManage',
    mixins: [ManageMixin],
    components: {
      CsvDatasourceForm
    },
    data() {
      return {
        loading: false,
        searchFormData: {
          name: ''
        },
        columns: [
          {
            title: '名称',
            key: 'name',
            width: 180
          },
          {
            title: '备注',
            key: 'remark'
          },
          {
            title: '创建日期',
            key: 'create_date',
            width: 170
          },
          {
            title: '操作',
            key: 'action',
            width: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    size: 'small',
                    type: 'primary',
                    icon: 'md-create'
                  },
                  'class': {
                    'm-r-5px': true
                  },
                  on: {
                    click: () => {
                      this.openCsvDatasourcesForm('edit', params.row.id)
                    }
                  }
                }),
                h('Poptip', {
                  props: {
                    confirm: true,
                    transfer: true,
                    placement: 'top-end',
                    title: '您确定要删除此项吗？'
                  },
                  style: {

                  },
                  on: {
                    'on-ok': () => {
                      this.deleteCsvDatasource(params.row.id)
                    }
                  }
                }, [
                  h('Button', {
                    props: {
                      size: 'small',
                      type: 'error',
                      icon: 'md-trash'
                    }
                  },)
                ])
              ]);
            }
          }
        ],
        tableData: [],
      }
    },
    mounted() {
      this.loadCsvDatasources();
    },
    methods: {

      loadCsvDatasources () {
        this.loading = true
        this.$PnApi.CsvDatasourceApi.getCsvDatasourceByPage(this.pageIndex, this.pageSize, this.searchFormData.name).then(result=>{
          this.tableData = result.data.payload.list;
          this.pageTotal = result.data.payload.total;
          this.loading = false
        })
      },

      openCsvDatasourcesForm (type, id) {
        this.$refs.csvDatasourceForm.init(type, id)
      },

      deleteCsvDatasource (id) {
        this.$PnApi.CsvDatasourceApi.deleteCsvDatasource(id).then(result=>{
          if(result.data.success) {
            this.loadCsvDatasources();
            this.$Message.success(result.data.message)
          }
        })
      }

    },
    computed: {}
  };
</script>

<style scoped>

</style>
